﻿@{
    ViewBag.Title = "Picture List";
    Layout = "~/Views/Shared/_PictureListLayout.cshtml";
}

<td><img  style="width: 20px; height: 50px;" data-bind="attr: {src: SmallPicPath}" /></td>
<td data-bind="text: Date"></td>
<td data-bind="text: Place"></td>
<td data-bind="text: Sex"></td>
<td data-bind="text: Item"></td>
<td data-bind="text: Color"></td>
<td data-bind="text: Style"></td>
<td data-bind="text: Length"></td>
<td data-bind="text: Collar"></td>
<td data-bind="text: Front"></td>
<td data-bind="text: Sleeve"></td>
<td data-bind="text: SweaterTexture"></td>
<td data-bind="text: Type"></td>


@section Script
 {
    <script type="text/javascript">
        ko.bindingHandlers.datepicker = {
            init: function (element, valueAccessor, allBindingsAccessor) {
                //initialize datepicker with some optional options
                var options = allBindingsAccessor().datepickerOptions || {};
                $(element).datepicker(options).on("changeDate", function (ev) {
                    var observable = valueAccessor();
                    observable(ev.date);
                });
            },
            update: function (element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                $(element).datepicker("setValue", value);
            }
        };

        ko.extenders.required = function (target, overrideMessage) {
            //add some sub-observables to our observable
            target.hasError = ko.observable();
            target.validationMessage = ko.observable();

            //define a function to do validation
            function validate(newValue) {
                target.hasError(newValue ? false : true);
                target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
            }

            //initial validation
            validate(target());

            //validate whenever the value changes
            target.subscribe(validate);

            //return the original observable
            return target;
        };

        var options = {
            title: "Picture List",
            searchCriteria: [
                { displayText: "UserName", value: ko.observable() }
            ],
            headers: [
                { displayText: "Pic", value: "SmallPicPath", width: "auto", canOrder: "false" },
                { displayText: "Date", value: "Date", width: "auto", canOrder: "true" },
                { displayText: "Place", value: "Place", width: "auto", canOrder: "true" },
                { displayText: "Sex", value: "Sex", width: "auto", canOrder: "true" },
                { displayText: "Item", value: "Item", width: "auto", canOrder: "true" },
                { displayText: "Color", value: "Color", width: "auto", canOrder: "true" },
                { displayText: "Style", value: "Style", width: "auto", canOrder: "true" },
                { displayText: "Length", value: "Length", width: "auto", canOrder: "true" },
                { displayText: "Collar", value: "Collar", width: "auto", canOrder: "true" },
                { displayText: "Front", value: "Front", width: "auto", canOrder: "true" },
                { displayText: "Sleeve", value: "Sleeve", width: "auto", canOrder: "true" },
                { displayText: "SweaterTexture", value: "SweaterTexture", width: "auto", canOrder: "true" },
                { displayText: "Type", value: "Type", width: "auto", canOrder: "true" },
                { displayText: "Operation", value: "", width: "auto", canOrder: "false" }
            ],
            needShowPwdLink: true,
            defaultOrderBy: "Date",

            dataQueryUrlAccessor: function (viewModel) {
                return appendQueryString('@Url.Action("GetPictures")', {
                    fromDate: viewModel.fromDate().toLocaleDateString(),
                    toDate: viewModel.toDate().toLocaleDateString(),
                    pageIndex: viewModel.pageIndex(),
                    orderBy: viewModel.orderBy(),
                    isAsc: viewModel.isAsc()
                });
            },
            dataAdvancedQueryUrlAccessor: function (viewModel) {
                return appendQueryString('@Url.Action("GetPicturesWithFilter")', {
                    fromDate: viewModel.fromDate().toLocaleDateString(),
                    toDate: viewModel.toDate().toLocaleDateString(),
                    pageIndex: viewModel.pageIndex(),
                    orderBy: viewModel.orderBy(),
                    isAsc: viewModel.isAsc()
                });
            },

            dataUpdateAccessor: function (data) { return appendQueryString('@Url.Action("Update")', { id: data.Id }); },
            dataDeleteAccessor: function (data) { return appendQueryString('@Url.Action("Delete")', { id: data.Id }); },
            dataViewAccessor: function (data) { return appendQueryString('@Url.Action("Detail")', { id: data.Id }); },
            
            downloadExcelAccessor: function () { return '@Url.Action("DownloadExcel")'; },
            downloadExcelAdvancedAccessor: function () { return '@Url.Action("DownloadExcelWithFilters")'; },
            ApplyRequestAccessor: function () { return '@Url.Action("ApplyRequest")'; },

            GetPlaceValuesAccessor: function () { return '@Url.Action("GetPlaceValues")'; },
            GetSexValuesAccessor: function () { return '@Url.Action("GetSexValues")'; },
            GetItemValuesAccessor: function () { return '@Url.Action("GetItemValues")'; },
            GetColorValuesAccessor: function () { return '@Url.Action("GetColorValues")'; },
            GetStyleValuesAccessor: function () { return '@Url.Action("GetStyleValues")'; },
            GetLengthValuesAccessor: function () { return '@Url.Action("GetLengthValues")'; },
            GetCollarValuesAccessor: function () { return '@Url.Action("GetCollarValues")'; },
            GetFrontValuesAccessor: function () { return '@Url.Action("GetFrontValues")'; },
            GetSleeveValuesAccessor: function () { return '@Url.Action("GetSleeveValues")'; },
            GetSweaterTextureValuesAccessor: function () { return '@Url.Action("GetSweaterTextureValues")'; },
            GetTypeValuesAccessor: function () { return '@Url.Action("GetTypeValues")'; },

            replaceData: function (data, viewModel) {
                for (var i = 0; i < viewModel.recordSet().length; i++) {
                    var existing = viewModel.recordSet()[i];
                    if (existing.Id == data.Id) {
                        viewModel.recordSet.replace(existing, data);
                        break;
                    }
                }
            },

            removeData: function (data, viewModel) {
                viewModel.recordSet.remove(function (c) {
                    return c.Id == data.Id;
                });
            }
        };

        var viewModel = new ViewModel(options);
        ko.applyBindings(viewModel);

        function appendQueryString(url, parameters) {
            url += "?";
            for (var key in parameters) {
                var data = "";
                if (parameters[key] === null || parameters[key] === undefined || parameters[key] === "") {
                    data = "";
                } else {
                    data = parameters[key];
                }
                url += key + "=" + encodeURIComponent(data) + "&";
            }
            return url;
        }
    </script>
}
